<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>资讯列表</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
	<link rel="stylesheet" href="{{ url('/common/mobile-common/common.css') }}">
	<link rel="stylesheet" href="{{ url('/mobile/css/menu-swip.css') }}">
	<link rel="stylesheet" href="{{ url('/mobile/css/article/index.css') }}">
	<script src="{{ url('mobile/js/jquery-1.8.3.min.js') }}"></script>
	<script src="{{ url('mobile/js/touchSwipe/jquery.touchSwipe.min.js') }}"></script>
	<script src="{{ url('mobile/js/moreLoad/iscroll4.js') }}"></script>
	<script src="{{ url('/common/mobile-common/hmt.js') }}"></script>
	<script src="{{ url('mobile/js/moreLoad/pagination.js') }}"></script>
	<style>
#pullDown, #pullUp {
    background: #fff;
    /*height: 40px;*/
    line-height: 40px;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    font-size: 14px;
    color: #888;
    text-align: center;
}
.scroller {
    position: absolute;
    z-index: 1;
    width: 100%;
    padding: 0;
}
#wrapper {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    /* top: 80px; */
}
	</style>
</head>
<body>
<div class="abouts">
	<div class="wrap-cont clearfix">
		<!--头部导航-->
		<div class="top-menu menu-wip">
			<ul class="line clearfix">
				<a href="{{url('wap/article?id=0')}}">
					<li><span @if(empty($_GET['id'])) class="nowsh"@endif>全部</span></li>
				</a>
				@foreach($menu as $v)
					<a href="{{url('wap/article?id='.$v['id'])}}">
						<li><span @if(!empty($_GET['id']))@if($_GET['id']==$v['id']) class="nowsh"@endif @endif>{{$v['name']}}</span></li>
					</a>
				@endforeach
			</ul>
		</div>
		<input name="id" type="hidden" value="{{$_GET['id']}}" id="id">
		<input name="page" type="hidden" value="2" id="page">
		<!--end-->
		<!--公告-->
		@if(!empty(count($res)))
		<div class="article-list ggao" id="wrapper">
			<div id="scroller">
				<div id="pullDown">
					  <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
				</div>
				<ul id="thelist">
					@include('wap.article.index-ajax')
				</ul>
				<div id="pullUp">
					<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
				</div>
			</div>
		</div>
		@endif
	</div>
</div>

</body>
<!--分页-->
<script type="text/javascript">
	//上拉事件
	var m = 1;
	function pullUpAction() {
		setTimeout(function () {
			var id=$('#id').val();
			var page=$('#page').val();
			page=parseInt(page);
			getList(page);

			function getList(page){
				$.get("{{ url('wap/article/indexAjax') }}",{id:id,page:page},function(data){
					var more = data.more;
					if(more == 1){
						$('#page').val(page+1);
						myScroll.refresh();
					}

					if (m== 0) {
						$('#pullUp').remove();
						return false;
					}

					if(more == 0){
						m = 0;
					}

					if(data.html){
						$('#thelist').append(data.html);
						myScroll.refresh();
					}

				});
			};
		}, 1000);
	}
</script>
<script>
	$(function(){
		//导航切换样式
		$(".top-menu li").click(function(){
			var liIndex=$(this).index();
			$(".top-menu a li span").removeClass("nowsh");
			$(this).find("span").addClass("nowsh");
			if(liIndex==0){
				$(".article-list").show();
			}
			else{
				$(".article-list").hide();
				$(".article-list").eq(liIndex-1).show();
			}
		});
		//导航滑动
		var liIndex=$(".menu-wip ul li").length;
//		if(liIndex>5){
		n=$('.line li').size();
		var wh=100*n+"%";
		$('.line').width(wh);
		var lt=(100/n/5);
		var lt_li=lt+"%";
		$('.line li').width(lt_li);
		var y=0;
		var w=n/2;
		if(liIndex>5){
			$(".line").swipe( {
				swipeLeft:function() {
					if(y==-lt*w){
						alert('已经到最后页');
					}else{
						y=y-lt;
						var t=y+"%";
						$(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} );
					}
				},
				swipeRight:function() {
					if(y==0){
						alert('已经到第一页')
					}else{
						y=y+lt;
						var t=y+"%";
						$(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} );
					}

				}
			});
		}

//		}

		//资讯列表文字个数限制
		$(".article-ifo p").each(function(){
			var txtLegth=$(this).text().length;
			var txtInfo=$(this).text();
			var nowInfo=txtInfo.substr(0, 62);
			if(txtLegth>62){
				nowInfo+='...';
			}
			$(this).text(nowInfo);
		});
	})
</script>
</html>
